<template>
  <div id="totalIntegral">
    <topSearch @toSearch="toSearch" :formInline="formInline"></topSearch>
    <div class="totalIntegral-box">
      <el-row>
        <el-col :span="5">
          <el-card :body-style="{ padding: '10px' }">
            <div
              class="el-card-content"
              style="display:flex;flex-direction: row;"
            >
              <div
                style="width: 80px;height:100%px; display: flex;align-items:center;  justify-content: center;transform: scale(2.9);"
              >
                <i
                  class="el-icon-message"
                  style="width:100%;display:flex;align-items:center;  justify-content: center;"
                ></i>
              </div>
              <div style="padding: 14px;">
                <span style="font-size:14px">总获得积分</span>
                <div class="bottom clearfix">
                  <span>{{ totalIntegral?totalIntegral:'暂无数据' }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col style="margin-left:30px" :span="5">
          <el-card :body-style="{ padding: '10px' }">
            <div
              class="el-card-content"
              style="display:flex;flex-direction: row;"
            >
              <div
                style="width: 80px;height:100%px; display: flex;align-items:center;  justify-content: center;transform: scale(2.9);"
              >
                <i
                  class="el-icon-message"
                  style="width:100%;display:flex;align-items:center;  justify-content: center;"
                ></i>
              </div>
              <div style="padding: 14px;">
                <span style="font-size:14px">总使用积分</span>
                <div class="bottom clearfix">
                  <span>{{ consumeTotalIntegral?consumeTotalIntegral:"暂无数据" }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import topSearch from '@component/intergralManagement/integralMarket/topSearch' // 上部搜索条件
import { getIntegralsList } from '@/api/couponsIntegral/integralMarket.js' // 接口
export default {
  name: 'totalIntegral',// 积分数据大盘
  components: {
    topSearch
  },
  data() {
    return {
      formInline: {
        days: 0,
        startTime: '', // 开始时间
        endTime: '' // 结束时间
      },
      consumeTotalIntegral: 0,
      totalIntegral: 0
    }
  },
  mounted() {
    this.searchList()
  },
  methods: {
    toSearch(obj) {
      if (obj != void 0) {
        getIntegralsList(
          obj,
          (response) => {
            this.consumeTotalIntegral = response.consumeTotalIntegral
            this.totalIntegral = response.totalIntegral
          },
          (response) => {
            this.loading = false
            this.$message.warning('编辑失败，' + response.message)
          }
        )
      }
    },
    searchList() {
      this.toSearch()
    }
  }
}
</script>
<style lang="less" scoped>
#totalIntegral {
  margin-top: 20px;
  padding-left: 25px;
  .totalIntegral-box {
    margin: 0 50px 30px 0px;
    border: 1px solid #ccc;
    padding: 15px 20px;
    border-radius: 20px;
    .el-row {
      display: flex;
      //   justify-content: space-between;
    }
  }
}
</style>
